<template>
  <el-table
    ref="tableRef"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    fit
    :border="true"
    highlight-current-row
    style="width: 100%"
  >
    <el-table-column
      type="selection"
      align="center"
      :reserve-selection="true"
      fixed
      :selectable="selectable"
      v-if="isSelection"
    />
    <template v-for="item in tableLabel" :key="item.prop">
      <el-table-column
        v-if="item.columnType === 'slot' && item.isColumn"
        :label="$t(item.label)"
        :prop="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
        :show-overflow-tooltip="true"
        :fixed="item.fixed"
        :sortable="item.sortable"
        :type="item.type"
      >
        <template #default="scope">
          <slot :name="item.slotName" :data="scope" />
        </template>
      </el-table-column>
      <el-table-column
        v-if="item.columnType !== 'slot' && item.isColumn"
        :label="$t(item.label)"
        :prop="item.prop"
        :width="item.width"
        :min-width="item.minWidth"
        :show-overflow-tooltip="true"
        :fixed="item.fixed"
        :sortable="item.sortable"
        :type="item.type"
      />
    </template>
  </el-table>
</template>
<script lang="ts" setup>
import { ref, type PropType } from "vue";
import { ElTable } from "element-plus";
import type { TableColumn } from "@/types";

const tableRef = ref<any>();
// 手动转发Table Exposes.
defineExpose({
  clearSelection: () => tableRef.value?.clearSelection(),
  getSelectionRows: () => tableRef.value?.getSelectionRows(),
  toggleRowSelection: (row: any, selected: boolean) =>
    tableRef.value?.toggleRowSelection(row, selected),
  toggleAllSelection: () => tableRef.value?.toggleAllSelection(),
  toggleRowExpansion: (row: any, expanded?: boolean) =>
    tableRef.value?.toggleRowExpansion(row, expanded),
  setCurrentRow: (row: any) => tableRef.value?.setCurrentRow(row),
  clearSort: () => tableRef.value?.clearSort(),
  clearFilter: (columnKeys?: string[]) => tableRef.value?.clearFilter(columnKeys),
  doLayout: () => tableRef.value?.doLayout(),
  sort: (prop: string, order: string) => tableRef.value?.sort(prop, order),
  scrollTo: (options: number | ScrollToOptions, yCoord?: number) =>
    tableRef.value?.scrollTo(options, yCoord),
  setScrollTop: (top?: number) => tableRef.value?.setScrollTop(top),
  setScrollLeft: (left?: number) => tableRef.value?.setScrollLeft(left),
  refs: () => tableRef.value
});

defineProps({
  // 表头
  tableLabel: {
    type: Array as PropType<TableColumn[]>,
    default: () => []
  },
  // 是否显示复选框
  isSelection: {
    type: Boolean,
    default: true
  },
  // 是否禁用复选框
  selectable: {
    type: Function as PropType<(row: any, index: number) => boolean>,
    default: () => true
  }
});
</script>
